<script setup name="search-user">
import { useSearchResults } from '@/hookes/useSearch'

const props = defineProps({
  searchKey: {
    type: String
  }
})

const { list, loading, finished, onLoad, highlightKeyword } = useSearchResults('user')
</script>

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <RouterLink :to="{ path: '/singer/detail', query: { id: item.id } }" v-for="item in list" :key="item.id">
      <van-cell :border="false">
        <template #icon>
          <div class="icon">
            <van-image :src="item.avatarUrl" lazy-load round width="50" height="50" />
            <img v-if="item.avatarDetail" :src="item.avatarDetail.identityIconUrl" class="identity">
          </div>
        </template>

        <template #title>
          <span v-html="highlightKeyword(item.nickname)"></span>
          <span v-for="(i, index) in item.alias" :key="index">
            <span v-if="searchKey === i" style="color: #5983b2;">({{ i }})</span>
          </span>
        </template>

        <template #label>
          <van-text-ellipsis :content="item.userType === 0 ? item.signature : item.description" rows="1" />
        </template>
        <template #extra>
          <van-button :icon="item.followed ? 'success' : 'plus'" size="small" plain round
            :color="item.followed ? '#4c4d4d' : '#ff3534'">{{
              item.followed
              ?
              '已关注' : '关注' }}</van-button>
        </template>
      </van-cell>
    </RouterLink>
  </van-list>
</template>

<style scoped lang="scss">
.van-cell {
  color: var(--reversal-text);
  opacity: .9;
  background-color: var(--list-background);

  .icon {
    position: relative;

    .identity {
      width: 16px;
      height: 16px;
      position: absolute;
      bottom: 6px;
      right: 2px;
    }
  }

  :deep(.van-cell__title) {
    padding-left: 10px;
  }

  :deep(.van-cell__label) {
    font-size: 10px;
  }

  .van-button--round {
    font-size: 10px;
    background-color: transparent !important;
    height: 24px;
  }
}
</style>
